import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;
class Sider extends Component {
  state = {
    collapsed: false,
  }
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    })
  }
  render() {
    return (
      <Menu
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
      theme="dark"
      inlineCollapsed={this.state.collapsed}
    >
      <Menu.Item key="1">
        <Icon type="pie-chart" /><span><Link to="/">首页</Link></span>
      </Menu.Item>
      <SubMenu key="sub1" title={<span><Icon type="mail"/><span>商品管理</span></span>}>
        <Menu.Item key="2"><Link to="/commodity">商品管理</Link></Menu.Item>
      </SubMenu>
      <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>订单管理</span></span>}>
        <Menu.Item key="3"><Link to="/orde">订单管理</Link></Menu.Item>
      </SubMenu>
      <SubMenu key="sub3" title={<span><Icon type="appstore" /><span>广告管理</span></span>}>
        <Menu.Item key="4"><Link to="/advimg">广告列表</Link></Menu.Item>
      </SubMenu>
      <SubMenu key="sub4" title={<span><Icon type="appstore" /><span>分类列表</span></span>}>
        <Menu.Item key="5"><Link to="/classify">商品分类列表</Link></Menu.Item>
      </SubMenu>
      <SubMenu key="sub5" title={<span><Icon type="appstore" /><span>系统管理</span></span>}>
        <Menu.Item key="6"><Link to="/log">操作日志</Link></Menu.Item>
      </SubMenu>
    </Menu>
    )
  }
}
export default Sider
// ReactDOM.render(<Sider />, mountNode)
